<template>
    <div class="account-order-info">
        <div class="container">
            <div class="row">
                <div id="content" class="col-sm-12">
                    <div class="nav-bar">历史订单</div>

                    <div class="row widget">
                        <div class="col-xs-12">
                            <div class="list-two-column-justified">
                                <dl>
                                    <dt>订单编号：</dt>
                                    <dd>#{{order_info.order_no}}</dd>
                                </dl>
                                <dl>
                                    <dt>订单日期：</dt>
                                    <dd>{{order_info.create_time}}</dd>
                                </dl>
                                <dl>
                                    <dt>付款方式：</dt>
                                    <dd>{{order_info.payment_name}}</dd>
                                </dl>
                                <dl>
                                    <dt>配送方式：</dt>
                                    <dd>{{order_info.shipping_name}}</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="row widget">
                        <div class="col-sm-12">
                            <strong>配送地址</strong> <br>
                            {{order_info.customer_id}} (12312312312)<br>{{order_info.address_province}}{{order_info.address_city}}{{order_info.address_area}}<br>{{order_info.address_detail}}
                        </div>
                    </div>
                    <div class="row widget">
                        <div class="col-xs-12">
                            <div id="checkout-payment" class="clearfix">
                                <div class="buttons">
                                    <div class="pull-right">
                                        <a v-on:click="goto_pay()" id="button-confirm" class="btn btn-primary">继续付款</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row widget">
                        <div class="col-xs-12">
                            <div v-for="goods in order_info.goods" class="product-item">
                                <div class="image">
                                    <img v-bind:src="goods.image"
                                         v-bind:alt="goods.goods_name"
                                         class="img-responsive">
                                </div>
                                <div class="info">
                                    <div class="name">
                                        <a v-bind:href="'#/goods/'+ goods.goods_id">{{goods.goods_name}}</a></div>
                                    <div class="data">
                                        <!--<div class="model"><b>型号</b>: &#45;&#45;</div>-->
                                        <div class="total">￥{{goods.goods_price}} x {{goods.goods_num}} = <strong>￥{{goods.goods_total}}</strong></div>
                                    </div>
                                    <div class="action pull-right">
                                        <a v-bind:href="'#/goods/'+ goods.goods_id" class="btn btn-default">再次购买</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="row widget">
                        <div class="col-xs-12">
                            <div class="list-two-column-justified">
                                <dl v-for="item in order_info.total">
                                    <dt v-show="item.code=='goods'">商品总额</dt>
                                    <dt v-show="item.code=='shipping'">配送总额</dt>
                                    <dt v-show="item.code=='total'">订单总额</dt>
                                    <dd>￥{{item.value}}</dd>
                                </dl>

                            </div>
                        </div>
                    </div>
                    <div class="row widget">
                        <h2>订单记录</h2>
                        <div v-for="item in order_info.history" class="col-xs-12">
                            <div class="list-two-column-justified">
                                <dl><dt>订单日期</dt><dd>{{item.create_time}}</dd></dl>
                                <dl><dt>订单状态</dt><dd>{{item.order_status_text}}</dd></dl>
                            </div>
                        </div>
                    </div>
                    <!-- .buttons.clearfix is required to display shipping tracking block from vqmod -->
                    <div class="buttons clearfix"></div>
                </div>
            </div>
        </div>

        <bottom-nav></bottom-nav>
    </div>

</template>

<script>
    import nav from '../components/common/nav';
    export default {
        name: "account_order_info",

        data:function(){

            return{
                order_id:0,

                order_info:{

                    order_no:'',
                    create_time:'',
                    payment_name:'',
                    shipping_name:'',

                    address_area:'',
                    address_city:'',
                    address_detail:'',
                    address_province:'',

                    goods:[],
                    total:[]
                },

            }

        },

        methods:{

            get_order_info:function(){

                var t = this;
                var url = this.config.app_url + '&r=checkout.order.info';
                url += '&order_id=' + this.order_id;
                this.axios.get( url ).then(function( res ){

                    t.order_info = res.data.order;

                });
            },


            goto_pay:function(){



            }

        },

        created:function(){

            this.order_id = this.$route.params.order_id;

            this.get_order_info();
        },

        components:{
            'bottom-nav':nav
        }
    }
</script>

<style scoped>

</style>